import React, { Component } from 'react'
import gradeApi from '../../../api/grade/index'
import { subject, teacher } from '../../../api/index'
import { addCourseApi, courseUploadApi } from '../../../api/course/course'
import { Button, Form, Input, Upload, Select, DatePicker, Space, message } from 'antd';
import Item from 'antd/lib/list/Item';
const { Option } = Select;
const { RangePicker } = DatePicker;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

export default class AddCourse extends Component {
    state = {
        gradeList: [],
        subjectList: [],
        teacherList: [],
        fileList: [],
        imgUrl: '',
        pubTime: ''
    }
    componentDidMount() {
        this.getMsg()
    }
    getMsg = async () => {
        // const data = await gradeApi.getGradeListApi()
        // const data1 = await subject.getSubjectList()
        // const data2 = await teacher.getTeacherList()


        var { data } = await gradeApi.getGradeListApi()
        this.setState({ gradeList: data })
        var { data } = await subject.getSubjectList()
        this.setState({ subjectList: data })
        var { data } = await teacher.getTeacherListApi({})
        this.setState({ teacherList: data.records })
        // const fileList1 = [{ uid: imgUrl, thumbUrl: 'http://jacklv.cn/images/' + imgUrl }]
        // this.setState({ fileList: fileList1 })
        console.log(6666, this.state.teacherList);
        // console.log(555, data2);
        // this.setState({ gradeList: data, subjectList: data1, teacherList: data2.records })
    }
    onFinish = async (values) => {
        values.pubTime = this.state.pubTime
        values.cover = this.state.imgUrl
        values.buyNum = parseInt(values.buyNum)
        values.expiry = parseInt(values.expiry)
        values.gradeId = parseInt(values.gradeId)
        values.lessonNum = parseInt(values.lessonNum)
        values.price = parseInt(values.price)
        values.subjectId = parseInt(values.subjectId)
        values.teacherId = parseInt(values.teacherId)
        values.viewNum = parseInt(values.viewNum)
        console.log('Success:', values);
        const { data } = await addCourseApi(values)
        console.log(8888, data);
        if (data === null) {
            message.success('新增成功')
            this.props.history.push('/home/courseList')
        }
    };
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        this.setState({ fileList: e.fileList })
        return e && e.fileList;
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
    }
    // 时间选择
    onChange = (value, dateString) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.setState({ pubTime: dateString })
    }

    onOk = (value) => {
        console.log('onOk: ', value);
    }
    render() {
        const { gradeList, subjectList, teacherList, imgUrl } = this.state
        return (
            <div>
                <Form
                    {...layout}
                    name="basic"
                    // initialValues={}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    style={{ width: 1200, margin: 20 }}
                    ref={ins => this.ins = ins}
                >
                    <Form.Item
                        label="课程名称"
                        name='name'
                        rules={[{ required: true, message: '请输入课程名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="有效期"
                        name="expiry"
                        rules={[{ required: true, message: '请输入有效期!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="是否精品"
                        name="isFine"
                        rules={[{ required: true, message: '请选择是否是精品!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            <Option value="0">普通</Option>
                            <Option value="1">精品</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="是否免费"
                        name="isFree"
                        rules={[{ required: true, message: '请选择是否免费!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            <Option value="0">免费</Option>
                            <Option value="1">付费</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="课程价格"
                        name="price"
                        rules={[{ required: true, message: '请输入价格!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="课时数"
                        name="lessonNum"
                        rules={[{ required: true, message: '请输入正确数量!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="所属教师"
                        name="teacherId"
                        rules={[{ required: true, message: '请选择所属教师!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            {
                                teacherList.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="所属科目"
                        name="subjectId"
                        rules={[{ required: true, message: '请选择所属科目!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            {
                                subjectList.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="所属年级"
                        name="gradeId"
                        rules={[{ required: true, message: '请选择所属年级!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            {
                                gradeList.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="是否下架"
                        name="status"
                        rules={[{ required: true, message: '请选择是否下架!' }]}
                    >
                        <Select style={{ width: '100%' }} onChange={this.handleChange}>
                            <Option value="y">正常</Option>
                            <Option value="n">下架</Option>
                        </Select>
                    </Form.Item>
                    {/* 发布时间 */}
                    <Form.Item
                        label="发布时间"
                        name="pubTime"
                    // rules={[{ required: true, message: '请选择发布时间!' }]}
                    >
                        <Space direction="vertical" size={12}>
                            <DatePicker showTime onChange={this.onChange} onOk={this.onOk} />
                        </Space>
                    </Form.Item>

                    <Form.Item
                        label="观看数"
                        name="viewNum"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="购买数"
                        name="buyNum"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="课程描述"
                        name="description"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="cover"
                        label="头像"
                        valuePropName="fileList"
                        getValueFromEvent={this.normFile}
                    >
                        <Upload name="avatar"
                            action='http://192.168.41.80:8080/admin/course/upload'
                            beforeUpload={async (file, fileList) => {
                                console.log(2020, file, fileList);
                                console.log(file.lastModified);
                                const fd = new FormData()
                                this.setState({ imgUrl: file.name })
                                fd.append('coverFile', file.lastModified)
                                await courseUploadApi({ coverFile: file.lastModified })

                            }}
                            listType="picture-card"
                            headers={{ token: localStorage.getItem('token') }}
                        >
                            上传
                                {/* {
                                !fileList.length && '图片上传'
                            } */}

                        </Upload>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
